import React from 'react'
import '../my_pro_plan_page.css'
import {withRouter,} from 'react-router-dom'
import LocalStorageService from "../../../utils/LocalStorageService";
import {getPlanProDetailReq, getPlanProListReq} from "../../../apis/goApis";
import defaultAvatarSrc from "../../../res/images/web/pro_apply/专家头像@2x.png";
import {cleanPlanData} from "../../game-room/components/Main/plan/plan";
import {Icon, NavBar, Toast} from "antd-mobile";
import CustomButton from "../../../shared-components/CustomButton/CustomBotton";
import addPlanSrc from "../../../res/images/web/pro_apply/发表@2x.png";
import constants from "../../../utils/constants";
import MyProPlanItem from "../my-pro-plan-item/my-pro-plan-item";
import addProSrc  from '../../../res/images/web/pro_apply/写方案@2x.png'
import myProIncome  from '../../../res/images/web/pro_apply/佣金@2x.png'

class PlanProDetail extends React.Component {
    constructor(props) {
        super(props)
        this.uid = this.props.uid
        this.state = {
            avatarSrc: '',
            avatar: null,
            nickname: '',
            goodAtType: '',
            goodAtEvent: '',
            txt: '',
            p: 0,
            type: 1,
            list: [],
            end: false,
            tabs: ['全部', '免费', '付费',],
            tabActiveIndex: 0,
            count: [0, 0, 0,],
            rate: [0, 0,],
        }
    }

    componentDidMount() {
        this.getUserDetail()
            .then(() => (this.getProList()))
    }

    getUserDetail() {
        return getPlanProDetailReq({
            Uid: this.uid,
        }, true)
            .then((resp) => {
                let user = resp.data.ok
                if (user) {
                    let [goodAtType, goodAtEvent,] = user.Goodat
                    this.setState({
                        avatarSrc: user.Iconurl ? user.Iconurl : defaultAvatarSrc,
                        nickname: user.Nickname,
                        goodAtType: goodAtType ? goodAtType : '',
                        goodAtEvent: goodAtEvent ? goodAtEvent : '',
                        txt: user.Specialisttxt,
                    })
                }
            })
    }

    getProList() {
        return getPlanProListReq({
            P: this.state.p,
            Flag: this.state.type,
            Uid: this.uid,
        })
            .then((resp) => {
                if (resp.data.gs) {
                    let list = [...this.state.list, ...resp.data.gs.map(data => cleanPlanData(data)),]
                    let count = resp.data.count
                    let end = list.length === count[this.state.tabActiveIndex]
                    this.setState({
                        count,
                        list,
                        rate: resp.data.rate,
                        end,
                    })
                }
            })
    }

    getNextPageProList() {
        if (this.state.end) {
            Toast.info('已经没有数据', 1)
        } else {
            this.setState({
                p: this.state.p + 1,
            }, () => {
                this.getProList()
            })
        }
    }

    onTabClick(index) {
        this.setState({
            tabActiveIndex: index,
            list: [],
            p: 0,
            type: [1, 3, 2,][index],
        }, () => {
            this.getProList()
        })
    }

    onListScroll() {
        let ctn = this.listContainer
        const contentHeight = ctn.scrollHeight
        const top = ctn.scrollTop
        const reachBottom = top === contentHeight - ctn.clientHeight
        if (reachBottom) {
            this.getNextPageProList()
        }
    }

    onDelete = (planItem) => {
        const index = this.state.list.findIndex(p => p.id === planItem.id)
        const list = [...this.state.list,]
        const count = this.state.count
        const free = planItem.Price === 0
        if (free) {
            count[1]--
        } else {
            count[2]--
        }
        count[0]--
        list.splice(index, 1)
        this.setState({
            list,
            count: [...count,],
        })
    }

    render() {


        const buttons = <div className='flex'>
            <img src={addProSrc} style={{width: 28, height: 28, marginRight: '8px',}} alt='' onClick={() => this.props.history.push('./add-plan')}/>
            <img src={myProIncome} style={{width: 28, height: 28,}} alt='' onClick={() => this.props.history.push('./my-pro-income')}/>
        </div>

        const tagTextStyle = {
            border: '1px solid rgba(255, 255, 255, 0.4)',
            fontSize: '12px',
            lineHeight: '16px',
            padding: '0 2px',
            color: 'rgba(255, 255, 255, 0.5)',
        }

        const isUser = this.props.isUser

        return <>
            <NavBar
                style={{backgroundColor: `${constants.themeColor}`}}
                leftContent={<Icon type='left' size='lg'/>}
                onLeftClick={() => {this.props.history.goBack()}}
                rightContent={isUser ? buttons : null}
            >
                <p>{isUser ? '我的主页' : '专家主页'}</p>
            </NavBar>
            <div
                style={{
                    padding: '8px 16px 12px',
                    backgroundColor: `${constants.themeColor}`,
                }}
                onClick={() => {
                    if (isUser) {
                        this.props.history.push('./set_pro_detail')
                    }
                }}
            >
                <div className='flex-space-between-align-center mg-b-12px'>
                    <div className='flex-align-center'>

                        <div
                            style={{
                                width: '48px',
                                height: '48px',
                                borderRadius: '50%',
                                background: `no-repeat url(${this.state.avatarSrc}) 50% 50%/cover, #fff`,
                                marginRight: '12px',
                            }}
                        />

                        <div>
                            <div className='flex-align-center mg-b-8px'>
                            <span
                                style={{
                                    color: '#fff',
                                    fontSize: '16px',
                                    lineHeight: '16px',
                                    marginRight: '4px',
                                }}
                            >{this.state.nickname}</span>
                                <span
                                    style={{
                                        color: '#fff',
                                        fontSize: '12px',
                                        lineHeight: '16px',
                                        background: '#36C8B9',
                                        padding: '0 4px',
                                    }}
                                >
                                近{this.state.rate[0]}场中{this.state.rate[1]}
                            </span>
                            </div>
                            <div>
                            <span
                                style={{
                                    ...tagTextStyle,
                                    marginRight: '6px',
                                }}
                            >
                                {this.state.goodAtEvent}
                            </span>
                                <span
                                    style={{
                                        ...tagTextStyle,
                                    }}
                                >
                                {this.state.goodAtType}
                            </span>
                            </div>
                        </div>

                    </div>

                    {isUser ? <Icon type='right' size='xs' color='#fff'/> : null}
                </div>

                <div
                    style={{
                        fontSize: '12px',
                        color: 'rgba(255, 255, 255, 0.5)',
                        lineHeight: '16px',
                    }}
                >
                    <span>
                       简介：
                    </span>
                    <span>
                        {this.state.txt}
                    </span>
                </div>

            </div>

            <div className="flex-space-between-align-center" style={{padding: '12px 16px'}}>
                <p
                    style={{
                        fontSize: '16px',
                        lineHeight: '22px',
                    }}
                >方案</p>
                <div className='flex'>
                    {this.state.tabs.map((tab, index) => {
                        const active = index === this.state.tabActiveIndex
                        const gap = <span
                            style={{padding: '0 8px',}}
                        >|</span>
                        return <div
                            style={{
                                color: 'rgba(66, 66, 66, 0.4)',
                            }}
                            key={index}
                            onClick={() => this.onTabClick(index)}
                        >
                            <span
                                style={{
                                    color: active ? '#FFA500' : '',
                                    marginRight: '8px',
                                }}
                            >
                                {tab}
                            </span>
                            <span style={{color: active ? '#FFA500' : '',}}>
                                {this.state.count[index] || 0}
                            </span>
                            {index !== 2 ? gap : null}
                        </div>
                    })}
                </div>
            </div>

            <div
                style={{
                    height: window.innerHeight - 96 - 45 - 46,
                    overflowY: 'scroll',
                }}
                onScroll={() => this.onListScroll()}
                ref={el => this.listContainer = el}
            >
                {this.state.list.map((data, index) => <MyProPlanItem
                    key={index}
                    planData={data}
                    onDelete={this.onDelete}
                    isUser={this.props.isUser}
                />)}
            </div>
        </>
    }
}

export default withRouter(PlanProDetail)